<template>
  <div>
    <header>
      <div class="zbs-box">
                <h2 class="zbs-name">赵本山</h2>
                <!-- <p class="zbs-major">软件工程专业</p> -->
            </div>
      <h1>-- ABOUT ME --</h1>
      <div class="tags-box">
        <div class="tags-item" v-for="item in tagsData" :key="item.svg">
          <img :src="item.svg"/>
          <h1>{{item.title}}</h1>
          <p v-for="p in item.content" :key="p">{{p}}</p>
        </div>
      </div>
    </header>
    <footer>
      <h2>自我介绍</h2>
      <div v-for="item in oneself" :key="item.title">
        <h6>{{item.title}}</h6>
        <p>{{item.content}}</p>
      </div>
        
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tagsData: [
        {
          svg:require("@/assets/about/personalInformation.svg"),
          title:"基础信息",
          content: [
            "性别：男",
            "年龄：24岁"
          ]
        },
        {
          svg:require("@/assets/about/educationalBackground.svg"),
          title:"教育背景",
          content: [
            "重庆工程学院",
            "软件工程专业",
            "本科"
          ]
        },
        {
          svg:require("@/assets/about/jobIntention.svg"),
          title:"求职意向",
          content: [
            "WEB前端开发",
            "JAVA后端开发"
          ]
        },
        {
          svg:require("@/assets/about/contactInformation.svg"),
          title:"联系方式",
          content: [
            "电话：",
            "18716384024",
            "邮箱：",
            "2121333099",
                  "@qq.com"
          ]
        }
      ],
      oneself:[
        {title:"工作方面：",content:"工作认真负责，踏实、细致而有耐心，有上进心，动手能力强，勤于思考与总结，富有创造力;能吃苦刻苦，有较强的组织能力和团队精神;性格开朗、热情、随和，适应环境能力强，易于与人交往。",},
        {title:"职业素质：",content:"敢于面对风险，承担压力，乐于从事挑战性工作，为人坦诚、守信、自信;适应性强, 适应新思维、新方式、新问题和新环境;逻辑性强。"}
      ]
    }
  }
}
</script>
<style scoped>
@media screen and (max-width:980px ) {
    header{
      height: 40vh !important;
    }
    footer{
      height: 60vh !important;
    }
}
.zbs-box{
    width: 100%;
    text-align: center;
    color: black;
}
.zbs-name{
  margin-top: 0.2rem;
    font-size: 0.3rem;
}
header{
  width: 100%;
  height: 50vh;
}
header>h1{
  margin-top: 0.1rem;
  font-size: 0.1rem;
}
.tags-box{
  padding: 0 0.6rem;
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-around;
}
.tags-item{
  width: 25%;
}
.tags-item  > img{
  width: 1rem;
}
.tags-item > h1{
  margin-top: -0.2rem;
  margin-bottom: 0.1rem;
  font-size: 0.24rem;
}
.tags-item > p{
  color: rgb(173, 173, 172);
  font-size: 0.16rem;
}
footer{
  background-color: rgb(236, 234, 234);
  height: 50vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
}
footer > h2{
  margin-top: 0.2rem;
  font-size: 0.3rem;
  margin-bottom: 0.1rem;
}
footer > div> p{
  text-indent: 2em;
  text-align: left;
  line-height: 0.5rem;
  font-size: 0.16rem;
}
footer > div{
  font-size: 0.16rem;
  width: 80%;
}
footer >div> h6 {
  text-align: left;
  line-height: 0.5rem;
  font-size: 0.18rem;
}
</style>
